<template>
    <div>
        <vxe-modal 
            :show-footer="true"
            
            show-zoom resize
            v-model="showPopup"
            @confirm="handleConfirm"
            @cancel="handleCancel"
            >
            <template #defalut>
                <div>默认插槽</div>
            </template>
            <template #header>
                <h2>{{ title }}</h2>
            </template>
            <template #footer>
                <div>自定义底部</div>
            </template>
        </vxe-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
    // 是否显示弹窗
    showPopup: {
        type: Boolean,
        default: false,
    },
    // 弹窗标题
    title: {
        type: String,
        default: '标题'
    },
    // 是否显示取消按钮
    showButton:{
        type: Boolean,
        default: true
    }
})
const showPopup = ref(props.showPopup)

const handleConfirm = ()=>{
    console.log('confirm')

}

const handleCancel = ()=>{
    console.log('cancel')
}


</script>
